<template>

  <!-- 条件搜索表单 -->
  <!-- :inline="true" 让表单内容并列显示在同一行上 -->
  <el-form :inline="true" :model="activityQuery" :rules="activityRules" ref="activityRefForm">

    <!-- 负责人 -->
    <el-form-item label="负责人">
      <!-- clearable  显示清除按钮 -->
      <el-select
          v-model="activityQuery.ownerId"
          placeholder="请选择负责人"
          @click="loadOwner()"
          clearable
          style="width: 200px">

        <el-option
            v-for="owner in this.ownerOptions"
            :key="owner.id"
            :label="owner.name"
            :value="owner.id">
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 活动名称 -->
    <el-form-item label="活动名称">
      <el-input v-model.trim="activityQuery.name" placeholder="请输入活动名称" clearable />
    </el-form-item>

    <!-- 活动时间：开始时间和结束时间 -->
    <el-form-item label="活动时间">
      <!-- type="datetimerange"  日期选择器的类型（样式） -->
      <!-- value-format  绑定值的格式，向后端提交的格式 -->
      <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
      <el-date-picker
          v-model="activityQuery.activityTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss" />
    </el-form-item>

    <!-- 活动预算 -->
    <el-form-item label="活动预算" prop="cost">
      <el-input v-model.trim="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <!-- 创建时间 -->
    <el-form-item label="创建时间">
      <!-- type="datetimerange"  日期选择器的类型（样式） -->
      <!-- value-format  绑定值的格式，向后端提交的格式 -->
      <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
      <el-date-picker
          v-model="activityQuery.createTime"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSearch()">搜索</el-button>
      <!-- plain  没有背景色 -->
      <el-button type="primary" @click="onReset()" plain>重置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="add()" v-hasPermission="'activity:add'">录入市场活动</el-button>
  <el-button type="danger"  @click="batchRemove()" v-hasPermission="'activity:remove'">批量删除</el-button>

  <!-- 市场活动列表 -->
  <!--
    :data="activityList"  单向绑定表格数据

    @selection-change="handleSelectionChange"   选择改变事件
      勾选或者取消勾选复选框时触发该函数
      注意：这个函数使用的时候不需要加括号，函数触发时会自动传入参数，参数是勾选了复选框的选项数组
  -->
  <el-table
      :data="activityList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <!-- type="selection" 复选框 -->
    <el-table-column type="selection" width="55" />
    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="60" />
    <!-- 要想当页面宽度改变时，展示数据的不换行，可以给el-table-column标签单独设置宽度 -->
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="name" label="活动名称" width="120" />
    <el-table-column property="startTime" label="开始时间" />
    <el-table-column property="endTime" label="结束时间" />
    <el-table-column property="cost" label="活动预算" />
    <el-table-column property="createTime" label="创建时间" />
    <el-table-column label="操作" width="230px">
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row.id  获取当前行上数据对象的id -->
        <el-button type="primary" @click="detail(scope.row.id)" v-hasPermission="'activity:detail'">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)"   v-hasPermission="'activity:edit'"  >编辑</el-button>
        <el-button type="danger"  @click="remove(scope.row.id)" v-hasPermission="'activity:remove'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页功能 -->
  <!--
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

</template>

<script>
import {doDelete, doGet} from "../http/httpRequest.js";
  import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "Activity",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 市场活动条件搜索
        activityQuery: {
          // 活动时间由开始时间和结束时间组成，是一个数组
          // 要从数组中使用下标取值（activityTime[0]），就需要在该对象中将活动时间这个变量声明出来，否则找不到变量无法使用，会报错
          activityTime: []
        },

        // 市场活动列表，注意：是数组，不是对象，数组中的每一项都是一个对象
        activityList: [
          {
            // 对象中的引用数据类型变量需要声明出来，否则使用插值语法时会报错，找不到变量
            ownerDO: { }
          }
        ],

        pageSize: 0,  // 每页记录条数
        total: 0,     // 总条数

        // 负责人下拉列表数组
        ownerOptions: [
          // 这里的负责人下拉列表数组是在点击时才会查询数据，所以页面刚打开的时候是没有数据的，为了避免控制台弹出警告，在数组中添加对象并给属性赋空串
          {
            id: '',
            name: ''
          }
        ],

        // 定义市场活动搜索表单验证规则
        activityRules: {
          // 活动预算验证规则
          cost: [
            { pattern: /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur' }
          ]
        },

        // 批量删除市场活动的id数组
        activityIdArray: []
      }
    },

    // 页面渲染完成后，自动调用分页查询函数
    mounted() {
      this.getActivityList(1);
    },

    methods: {
      // 勾选或者取消勾选复选框时触发该函数，并自动传入参数（选项数组）
      handleSelectionChange(selectionItemArray) {
        // 每次触发该函数后，先将存放id的数组清空，然后再添加数据，以保证数据真实性，避免重复
        this.activityIdArray = [];

        // 遍历选项数组
        selectionItemArray.forEach((activity) => {
          // 取出市场活动的id，放入批量删除数组中
          let id = activity.id;
          this.activityIdArray.push(id);
        })
      },

      // 查询市场活动列表
      getActivityList(current) {

        // 先获取搜索表单的开始时间和结束时间
        let startTime = "";
        let endTime = "";
        // 给活动时间参数做非空判断，防止空指针报错
        if (this.activityQuery.activityTime) {
          // 活动时间参数不为空，用户选择了时间，给参数赋值
          startTime = this.activityQuery.activityTime[0];
          endTime = this.activityQuery.activityTime[1];
        }

        // 向后端发送请求
        doGet("/api/activity/list", {
          // 当前查询第几页
          current: current,

          // 搜索表单的条件
          ownerId: this.activityQuery.ownerId,        // 负责人的id
          name: this.activityQuery.name,              // 活动名称
          startTime: startTime,                       // 开始时间
          endTime: endTime,                           // 结束时间
          cost: this.activityQuery.cost,              // 活动预算
          createTime: this.activityQuery.createTime   // 创建时间
        }).then( (resp) => {
          if (resp.data.code === 200) {
            this.activityList = resp.data.data.list;  // 市场活动列表
            this.pageSize = resp.data.data.pageSize;  // 每页条数
            this.total = resp.data.data.total;        // 总条数
          } else {
            messageTip("市场活动列表获取失败", "error");
          }
        })
      },

      // 分页函数，当前页数发生改变时触发
      toPage(current) {
        // 分页查询的时候也会携带搜索条件进行条件查询，所以进行分页查询之前，先验证表单规则
        this.$refs.activityRefForm.validate( (isValid) => {
          // 表单验证通过再进行分页查询
          if (isValid) {
            // current这个参数是element-plus自动传过来，当前页数
            this.getActivityList(current);
          } else {
            messageTip("搜索内容不合法", "error");
          }
        })
      },

      // 加载负责人
      loadOwner() {
        // 向后台发送请求查询负责人的名字
        doGet("/api/owner/list", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.ownerOptions = resp.data.data;
          } else {
            messageTip("负责人获取失败", "error");
          }
        })
      },

      // 搜索按钮
      onSearch() {
        // 验证搜索表单规则
        this.$refs.activityRefForm.validate( (isValid) => {
          if (isValid) {
            // 验证通过，查询第一页数据（查询数据的时候会携带表单信息进行条件查询）
            this.getActivityList(1);
          }
        })
      },

      // 重置按钮（清空搜索条件）
      onReset() {
        // 给市场活动表单对象赋一个空对象
        this.activityQuery = { };
      },

      // 录入市场活动按钮
      add() {
        // 跳转路由
        this.$router.push("/dashboard/activity/add");
      },

      // 编辑按钮
      edit(id) {
        // 跳转路由
        this.$router.push("/dashboard/activity/edit/" + id);
      },

      // 详情按钮
      detail(id) {
        // 跳转路由
        this.$router.push("/dashboard/activity/detail/" + id);
      },

      // 删除按钮
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除该市场活动吗？").then(() => {
          // 用户点击确认，向后端发送请求
          doDelete("/api/activity/remove/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败，原因：" + resp.data.msg, "error");
            }
          })
        }).catch(() => {
          // 用户点击取消，弹出提示信息
          messageTip("取消删除", "warning");
        })
      },

      // 批量删除按钮
      batchRemove() {
        // 先判断批量删除数组中是否有数据
        if (this.activityIdArray.length > 0) {
          // 有数据，弹出确认框
          messageConfirm("确认删除这些数据吗？").then(() => {
            // 直接使用数组作为参数，会报错（浏览器控制台会显示存在跨域问题）
            // 原来是数组 activityIdArray = [1,2,5,6,7]  通过join(",")方法  变成字符串 ids = "1,2,5,6,7"
            let ids = this.activityIdArray.join(",");
            // 向后端发送请求
            doDelete("/api/activity/batchRemove", {
              ids: ids
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("删除成功", "success");
                // 刷新当前页面
                this.reload();
              } else {
                messageTip("删除失败，原因：" + resp.data.msg, "error");
              }
            })
          }).catch(() => {
            messageTip("取消删除", "warning");
          })
        } else {
          // 没有数据，弹出提示信息
          messageTip("请先勾选数据", "warning");
        }
      }
    }
  }
</script>

<style scoped>

  /* 条件搜索表单 */
  .el-form {
    margin-bottom: 20px;  /* 外边距 */
  }

  /* 表格 */
  .el-table {
    margin-top: 20px;     /* 上边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;     /* 上边距 */
  }

</style>

